<template>
  <div class="pageBg" v-if="numShow">
    <!-- 操作指引  图片-->
    <operatinGui  :num ="num" :showStyle="showStyle" @guideBottom="guideBottom" :showTextStyle="showTextStyle" ></operatinGui>
  </div>
  <div class="page">
    <!-- 导航栏 -->
    <div class="navBar">
      <customNavBar class="customNavBar" :titleTest="titleTest"></customNavBar>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      <!-- 用户信息 -->
      <div class="userInfo">
        <div class="userInfoTop">
          <van-image width="54" height="54" :src="headIcon" />
          <div class="userName">
            <div>{{ userInfoObject.userInfo.nickName || "名字" }}</div>
            <div>{{ userInfoObject.userInfo.deptName || "公司" }}</div>
          </div>
        </div>
        <div class="userInfoBottom" @click="gude()" v-log-button-name="'保单检视_工作台_使用指引'">使用指引 ></div>
      </div>
      <div class="contentSection">
        <!-- 任务统计 -->
        <div class="contentLeft" >
          <!---->
          <div  ref="myTask">
            <div class="title">
                <img :src="wdrw" alt="" />
                <div>我的任务</div>
            </div>
            <!-- 展开数据 -->
            <div class='chdeTle'>
                <div class="chdeTleCustomer" v-log-button-name="'保单检视_工作台_已完成'"  @click="gotas(1)">
                    <div class="chdeTleCustomerDv">
                        <div :class="numShowChange == 1?'projectListMg':''">已完成</div>
                        <div>{{userInfoObject.taskInfo.finishTaskCount || '0'}}</div>
                    </div>
                    <img src="../../assets/yfx.png" alt="">
                </div>
                <div class="chdeTleCustomer"   @click="gotas(2)" v-log-button-name="'保单检视_工作台_进行中'">
                    <div class="chdeTleCustomerDv">
                        <div :class="numShowChange == 2?'projectListMg':''">进行中</div>
                        <div>{{userInfoObject.taskInfo.doingTaskCount || '0'}}</div>
                    </div>
                    <img src="../../assets/yfx.png" alt="">
                </div>
                <div class="chdeTleCustomer"   @click="gotas(3)">
                    <div class="chdeTleCustomerDv">
                        <div :class="numShowChange == 3?'projectListMg':''" v-log-button-name="'保单检视_工作台_失败'">失败</div>
                        <div>{{userInfoObject.taskInfo.failTaskCount || '0'}}</div>
                    </div>
                    <img src="../../assets/yfx.png" alt="">
                </div>
            </div>
            <div class="title" ref="newCustomer" @click="gotasXkh()" v-log-button-name="'保单检视_工作台_新客邀请'">
                <img :src="xkhyq" alt="" />
                <div>新客户邀请</div>
            </div>
            <div class="title" ref="InviteAgain" @click="gotasCjwt()" v-log-button-name="'保单检视_工作台_常见问题'">
                <img :src="cjwt" alt="" />
                <div>常见问题</div>
            </div>
          </div>
          <!-- 底部客服 -->
          <div class="primary">
              <div class="primaryButtont">
                  <div>
                      <div class="primaryButtont1">
                          <img :src="dbkf" alt="" />
                          <span class="tels">客服电话</span>
                      </div>
                      <p>{{ phoneNumber || "400-1234-5678" }}</p>
                  </div>
              </div>
          </div>
        </div>
        <div class="contentRight"  >
            <!--任务组件-->
            <taskpad :type='numShowChange'  v-if="tastShow"></taskpad>
            <!-- 新客户邀请 -->
            <addingCustomersPad v-if="xkhShow"></addingCustomersPad>
            <!-- 常见问题 -->
            <div class="customerProject" v-if="cjwtShow">
                <div class="projectTop">常见问题</div>
                <div class="project"  v-for="(v,b) in porjectList" :key="b">
                    <div class="projectList" @click="projectRoyte(v)">
                        <div class="projectListDv">
                            <img src="../../assets/img/wtt.png" alt="">
                            <div>{{v.problemName}}</div>
                        </div>
                        <img :class="v.isShow?'projectListMg':'projectListMg1'" src="../../assets/img/xll.png" alt="">
                    </div>
                    <div class="projectBtoom" v-if="v.isShow">{{v.problemDescribe}}</div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template> 

<style lang="less" scoped>
.contentSection {
  width: 100%;
  padding: 12px;
  display: flex;
  height: calc( 100vh - 140px);
  overflow: auto;

  .contentLeft {
    width: 172px;
    padding: 6px 6px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    background: #ffffff;
    flex-direction: column;
    min-height: 540px;
    height: calc(100vh - 185px);
    justify-content: space-between;
    overflow: hidden;
    .title {
      width: 100%;
      height: 70px;
      display: flex;
      font-size: 15px;
      color: #333333;
      font-weight: bold;
      align-items: center;
      border-bottom: 2px solid #ececec;
      img {
        width: 19px;
        height: 19px;
      }
      div {
        margin-left: 10px;
      }
    }
    .primary {
        width: 90%;
        display: flex;
        // bottom: 30px;
        // position: absolute;
        align-items: center;
        justify-content: center;
        .primaryButtont {
            width: 100%;
            height: 90px;
            display: flex;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
            background: rgba(31, 141, 247, .3);
            img {
                width: 17px;
                height: 17px;
            }
            .primaryButtont1 {
                display: flex;
                margin-bottom: 10px;
                align-items: center;
                justify-content: center;
            }
            p {
                margin-top: 3px;
            }
        }
    }
    .chdeTle {
        .chdeTleCustomer {
            width: 100%;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2px solid #ececec;
            .chdeTleCustomerDv {
                display: flex;
                color: #333333;
                margin-left: 30px;
                align-items: center;
                justify-content: center;
                div:last-child{
                    width: 23px;
                    height: 23px;
                    display: flex;
                    font-size: 13px;
                    color: #198AFA;
                    margin-left: 10px;
                    border-radius: 50%;
                    align-items: center;
                    justify-content: center;
                    background: rgba(31, 141, 247, .3);
                }
                .projectListMg {
                    color: #198AFA;
                }
            }
        }
    }
  }
  .contentRight {
    width: calc(98%  - 164px);
    margin-left: 3%;
    min-height: 540px;
    height: calc(100vh - 185px);
    overflow: hidden;
    .customerProject {
          width: 100%;
          height: 100%;
          padding: 10px;
          text-align: left;
          border-radius: 13px;
          background: #FFFFFF;
          overflow: auto;
          .projectTop {
              font-size: 17px;
              color: #222222;
              font-weight: bold;
          }
          .project {
              background: #FAFAFA;
              .projectList {
                  height: 37px;
                  display: flex;
                  padding: 0 10px;
                  font-size: 13px;
                  margin-top: 13px;
                  font-weight: bold;
                  border-radius: 13px;
                  align-items: center;
                  justify-content: space-between;
                  .projectListDv {
                      display: flex;
                      align-items: center;
                      img {
                          width: 18px;
                          height: 18px;
                      }
                      div {
                          margin-left: 10px;
                      }
                  }
                  .projectListMg {
                      width: 23px;
                      height: 23px;
                  }
                  .projectListMg1 {
                      width: 23px;
                      height: 23px;
                      transform: rotate(270deg);
                  }
              }
              .projectBtoom {
                  display: flex;
                  font-size: 13px;
                  align-items: center;
                  padding: 0 10px 10px 13px;
                  justify-content: space-between;
              }
          }
    }
  }
}
.pageBg {
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  display: flex;
  overflow: hidden;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
}
.pageBg1 {
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  background: #f5f7fa;
}
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f5f7fa;
  .navBar {
    width: 100vw;
    height: 68px;
    position: absolute;
    top: 0px;
    background-color: #f0f3f5;
  }
  // 设置导航栏字体颜色
  :deep(.van-nav-bar__title) {
    color: #222222;
  }
  :deep(.van-nav-bar__content) {
    background-color: rgb(240, 243, 245);
    height: 48px;
  }
 
  .content {
    height: calc(100% - 68px);
    width: 100%;
    margin-top: 63px;
    overflow: hidden;
    box-sizing: border-box;
    box-sizing: border-box;
    .userInfo {
      height: 87px;
      display: flex;
      padding-left: 13px;
      align-items: center;
      justify-content: space-between;
      background: url(../../assets/background.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .userInfoTop {
        display: flex;
        align-items: center;
        .userName {
          text-align: left;
          font-size: 14px;
          color: #ffffff;
          line-height: 24px;
          padding-left: 10px;
        }
      }
      .userInfoBottom {
        width: 90px;
        height: 26px;
        display: flex;
        opacity: 0.9;
        color: #ffffff;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
        border: 1px solid #ffffff;
        background: rgba(0, 75, 131, 0.3);
        border-radius: 14px 0px 0px 14px;
      }
    }
  }
}
.tops {
  background-color: #831243;
  height: 24px;
  position: absolute;
  z-index: 9;
}
</style>
<script lang="ts" setup name="addCustomers">
import { useRouter, useRoute } from "vue-router";
import { Toast } from "/@/utils/Message";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import { sm2 } from "sm-crypto";
import { IntData } from "../Task/ts/workTable";
import customNavBar from "/src/components/NavBar/customNavBar.vue";
import taskpad from '/src/views/Task/taskpad.vue'
import addingCustomersPad from '/src/views/Task/addingCustomersPad.vue'
import operatinGui from '/src/components/operationalGuideline/operatinGui.vue'
import {
  baseInfo,
  taskInfo,
  customInfo,
  updatePasswordStatus,
  getProblemIn,
} from "/@/api/auth/task";
import { getConfiguration } from "/@/api/auth/repot";
import yfx from "../../assets/yfx.png";
import wdrw from "../../assets/wdrw.png";
import cjwt from "../../assets/cjwt.png";
import dbkf from "../../assets/dbkf.png";
import xkhyq from "../../assets/xkhyq.png";
import headIcon from "../../assets/img/features/headIcon.png";
import rightArrow from "../../assets/img/features/rightArrow.png";
import { JSONStringify } from "lib/tool";

//公钥串---加密使用
const publicKey = ref<string>(
  "044291b381a039a8d7d02d7272d2d7c78a30d33e3eeaa0b509bf77d2376582ab2d573730e6bfe9a53bad53f53ac1a85d9c11050931f04bc8b3afc04144d5a6f9be"
);
//私钥串---解密使用
const privateKey = ref<string>(
  "5aa03412c3051e1d4cf9d19cfbeeec70c28f388c9f82747cc912096c9cd44bea"
);
//获取元素高度
const myTask = ref(null)
const newCustomer = ref(null)
const InviteAgain = ref(null)
const showStyle = ref(null) //真正页面展示的使用指引样式
const showTextStyle = ref(null) //真正页面展示的文字样式
const myTaskstyle = ref(null)
const newCustomerstyle = ref(null)
const InviteAgainstyle = ref(null)
const myTaskstyletext = ref(null)
const newCustomerstyletext = ref(null)
const InviteAgainstyletext = ref(null)
// 显示任务组件状态
const tastShow = ref<any>(false);
const xkhShow = ref<any>(false);
const cjwtShow = ref<any>(false);
// 我的任务选中状态
const numShowChange = ref<any>(0);
const gotas = (v: any): void => {
    numShowChange.value = v
    tastShow.value = true
    xkhShow.value = false
    cjwtShow.value = false
};
// 新客户邀请
const gotasXkh = () => {
    numShowChange.value = 0
    xkhShow.value = true
    tastShow.value = false
    cjwtShow.value = false
}
// 常见问题
const gotasCjwt = () => {
    numShowChange.value = 0
    cjwtShow.value = true
    xkhShow.value = false
    tastShow.value = false
}
// 加密方法
const JIAMIPublicData = (data: string) => {
  const cipherMode = 1;
  const result = sm2.doEncrypt(data, publicKey.value, cipherMode);
  return `04${result}`;
};
const router = useRouter();
const route = useRoute();
const titleTest = ref<string>("工作台");
const phoneNumber = ref<string>("");
const list = ref([]);
const numShow = ref<boolean>(false);
const num = ref<number>(1);
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
const userInfoObject = reactive(new IntData());
const customName = ref<string>("");
const porjectList = ref([]);
const projectRoyte = (v: any) => {
  v.isShow = !v.isShow;
};
// 回车键
const onSearch = () => {
  getList();
};
// 右侧事件
const onCancel = (): void => {
  customName.value = "";
  getList();
};
// 用户列表
const getList = (): void => {
  let a = "";
  if (customName.value) {
    a = JIAMIPublicData(customName.value);
  } else {
    a = "";
  }
  customInfo({ customName: a }).then((res: any) => {
    finished.value = true;
    loading.value = false;
    if (res.code == 200) {
      userInfoObject.customInfo = res.data;
    }
  });
};
onMounted(async () => {
   //页面初始化获取元素高度
   if (myTask.value) {  
        const rect = myTask.value.getBoundingClientRect();  
        myTaskstyle.value = {
          transform:`translateY(${rect.top}px)`,
        }
        myTaskstyletext.value = {top:(rect.top + window.scrollY+130)+'px'}
      }  
  if (newCustomer.value) {  
        const rect = newCustomer.value.getBoundingClientRect();  
        newCustomerstyle.value = {
          transform:`translateY(${rect.top}px)`,
        }
        newCustomerstyletext.value = {top:(rect.top + window.scrollY+80)+'px'};
      }  
  if (InviteAgain.value) {  
        const rect = InviteAgain.value.getBoundingClientRect();  
         InviteAgainstyle.value = {
          transform:`translateY(${rect.top}px)`,
        }
         InviteAgainstyletext.value = {top:(rect.top + window.scrollY - 220)+'px'};
      } 


  // 新用户触发操作
  if ((sessionStorage.getItem("intPasswordStatus") as any) == 2) {
    numShow.value = true;
    showStyle.value = myTaskstyle.value
  } else {
    numShow.value = false;
  }
  const a: any = await getConfiguration({ name: "phoneNumber" });
  if (a?.code == 200) phoneNumber.value = a.data;

  // 工作台
  baseInfo({}).then((res: any) => {
    if (res.code == 200) {
      userInfoObject.userInfo = res.data;
    }
  });
  // 任务统计
  taskInfo({}).then((res: any) => {
    if (res.code == 200) {
      userInfoObject.taskInfo = res.data;
    }
  });
  // 常见问题
  getProblemIn().then((res: any) => {
    if (res.code == 200) {
      porjectList.value = res.data;
    }
  });
  // 用户列表
  getList();
  // 任务的数据
  gotas(1)
});
const customers = (v: any): void => {
  router.push({
    path: "/userInformation",
    query: { customId: v.customId as string },
  });
};
const yquse = (): void => {
  router.push("addingCustomers");
};
// 使用指引
const gude = () => {
  numShow.value = true;
  //使用指引上来默认展示第一步
  showStyle.value = myTaskstyle.value
};
// 弹框点击
const guideBottom = () => {
  num.value++;
  if(num.value  == 1 || num.value  == 4){
      showStyle.value = myTaskstyle.value
      showTextStyle.value = myTaskstyletext.value
    }else if(num.value == 2){
      showStyle.value =  newCustomerstyle.value
      showTextStyle.value = newCustomerstyletext.value
    }else{
      showStyle.value = InviteAgainstyle.value
      showTextStyle.value = InviteAgainstyletext.value
    }
  if (num.value > 3) {
    updatePasswordStatus({}).then((res: any) => {
      if (res.code == 200) {
        sessionStorage.setItem("intPasswordStatus", "0");
      }
    });
    num.value = 1;
    numShow.value = false;
  }
};
// 再次邀请
const inviteAgainClick = (v: any) => {
  router.push({
    path: "/addingCustomersz",
    query: { customId: v.customId as string },
  });
};
</script>



<!-- 
    头像	  仅展示	  图片			    默认头像，不可修改
    姓名	  仅展示	  文本			    从业人员姓名
    机构名称   仅展示	   文本			     从业人员所属机构名称
    已完成	  仅展示	   热区			    点击已完成区域，跳转到任务统计页面-已完成列表页面
    进行中	  仅展示	   热区			    点击进行中区域，跳转到任务统计页面-进行中列表页面
    失败	  仅展示	  热区			    点击失败区域，跳转到任务统计页面-失败列表页面
    姓名查询   输入	      文本框			 精确查询
    客户姓名   仅展示	   热区			     点击客户姓名区域，跳转到客户详情页面
    再次邀请   仅展示	   热区			     点击再次邀请区域，跳转到再次邀请页面
    添加客户   按钮		   点击添加客户按钮，  跳转到添加客户页面

    1、按已完成、进行中、失败三种维度统计该从业人员发起的所有检视任务。
    检视任务的所有状态包括：已创建、已查看告知页、已授权认证、已确认保单范围、生成报告中、已生成报告、未查看告知页、未授权认证、未选择保单范围、无有效保单、报告生成失败、终止。
    其中已完成维度包括：已生成报告状态的任务；

    进行中维度包括：已创建、已查看告知页、已授权认证、已确认保单范围、生成报告中状态的任务。

    失败维度包括：未查看告知页、未授权认证、未选择保单范围、无有效保单、报告生成失败、终止状态的任务。

    失败维度中的未查看告知页、未授权认证、未选择保单范围三种状态是指，在邀请二维码/链接超过7天有效期后，任务还停留在以上三种状态，则计为任务失败。
    
    已生成：后端计算引擎报告生成成功的任务状态。

    报告生成失败：后端计算引擎报告生成部分成功和报告生成失败的任务状态。
    终止状态是指在后台进行终止操作的任务状态 。
     
    全部客户
    1、客户名称列表按客户被创建检视任务的时间倒序排列。
    2、客户列表默认展示10条数，上滑加载10条数据。
-->
